<template>
    <el-container id="api-box">
        <el-aside :width="width + 'px'">
            <treeLine />
        </el-aside>
        <el-container style="position: relative;">
            <el-main style="padding: 0;">
                <contentBox></contentBox>
            </el-main>
        </el-container>
        <div class="moveBar" :style="{'left' : width - 3 + 'px'}" @mousedown="mousedown($event)">
        </div>
    </el-container>
</template>



<script>
    import treeLine from '@/api/tree/index.vue'
    import contentBox from '@/api/content/index'
    export default {
        components: {
            treeLine,
            contentBox
        },
        data() {
            return {
                width: 300,
            }
        },
        // mounted() {
        //     if (window.hasOwnProperty('titlebar')) {
        //         titlebar.titlebar.style.left = '370px';
        //     };
        // },
        methods: {
            mousedown(event) {
                document.body.style.cursor = 'col-resize';
                document.onmousemove = (event) => {
                    let left = event.clientX - 70;
                    if (left < 300) {
                        left = 300
                    } else if (left > document.body.clientWidth - 500) {
                        left = document.body.clientWidth - 500
                    }
                    this.width = left;
                    // if (window.hasOwnProperty('titlebar')) {
                    //     titlebar.titlebar.style.left = (left + 70) + 'px';
                    // };
                };
                document.onmouseup = () => {
                    document.body.style.cursor = '';
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
            },
        },
    }
</script>